<template>
  <basic-dialog
    :visible="show"
    minWidth="600px"
    isShowBasicFooter
    :isShowInnerLoading="isShowInnerLoading"
    :loading="isSubmitloading"
    @close="show = false"
    @submit="submit"
    title="自动轮班设置"
    :isFullScreen="false"
  >
    <div class="form-inline" style="padding-top: 20px;display: block">
      <yz-input inputType="date"
                placeholder="请选择开始日期"
                title="开始日期"
                isRule
                :isRange="false"
                :rules="[0]"
                v-model="params.date"/>
      <div class="padding-t-20 flex">
        <q-input v-model="params.cycle"
                  dense
                  emit-value8
                  map-options
                  :rules="[0, 4]"
                  :maxlength="3"
                  placeholder="请输入轮班周期数"
                  outlined
                 style="width: 220px"
        >
          <template v-slot:before>
            <label class="text-right name form-name label-width">
              <span class="text-red">*</span><span class="text-right">轮班周期:</span>
            </label>
          </template>
        </q-input>
        <q-select
          style="width: 140px"
          :options="typeOptions"
          v-model="params.type"
          dense
          options-dense
          emit-value
          map-options
          outlined
          class="margin-l-20"
        >
          <template v-slot:no-option>
            <div class="no-option"/>
          </template>
        </q-select>
      </div>
      <div class="form-name padding-t-20" style="text-align: left;padding-left: 6px">
        轮班顺序：*该顺序为，轮班周期的循环切换顺序
      </div>
      <div style="padding-left: 80px" class="padding-t-20">
        <transfer
          hideTitle
          v-model="params.selIds"
          :source-data="options"
          value-key="id"
          label-key="name"
          :rightList="rightList"
          :styles=" { width: '200px' , height: '300px' }"
          left-title="角色列表"
          right-title="已选角色"
        />
      </div>
    </div>
  </basic-dialog>
</template>

<script>
import Transfer from 'src/components/transfer'
export default {
  name: 'set-auto-shift',
  components: {
    Transfer
  },
  data () {
    return {
      isShowInnerLoading: false,
      isSubmitloading: false,
      params: {
        name: '',
        date: null,
        cycle: '',
        type: 0,
        selIds: []
      },
      rightList: [],
      options: [
        {
          id: 0,
          name: '喵喵喵'
        },
        {
          id: 1,
          name: '嘤嘤嘤'
        },
        {
          id: 2,
          name: '嗷嗷嗷'
        },
        {
          id: 3,
          name: '呜呜呜'
        }
      ], // 方案列表
      typeOptions: [
        {
          value: 0,
          label: '日'
        },
        {
          value: 1,
          label: '月'
        }
      ],
      show: false
    }
  },
  methods: {
    showDialog () {
      this.show = true
      this.params.type = 0
    },
    submit () {
      this.show = false
    }
  }
}
</script>

<style scoped lang="stylus">
>>>.mx-datepicker{
  width 300px !important
}
.input-width{
  width 380px
}
</style>
